<!-- 未更改 -->
<template>
  <div id="emp">
    <el-card class="box-card" shadow="always">
      <!-- card的头部 -->
      <template #header>
        <div class="card-header">


          <span class="title">医生管理界面</span>
          <div class="input_search">
            <el-input v-model="search" @input="search_change" placeholder="姓名查询" />
          </div>
          <el-button class="button_edit" type="primary" :icon="Plus" @click="preDate4Add">添加新员工</el-button>
        </div>
      </template>

      <!-- 以下是card的body区域，直接使用标签即可，不需要使用插槽 -->
      <!-- 员工信息列表 -->
      <el-table :data="pageDate" style="width: 100%">
        <!-- 扩展行信息 -->
          <el-table-column type="expand">
            <template #default="scope">
                <div style="padding: 20px">

                    <el-descriptions class="margin-top" :title="'患者 ' + scope.row.name + ' 的详情'" :column="3" border>
                        <!-- <template #extra>
                          <el-button type="primary">Operation</el-button>
                      </template> -->

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <!-- <el-icon :style="iconStyle">
                                      <user />
                                  </el-icon> -->
                                    <el-icon><Document /></el-icon>
                                    病历号
                                </div>
                            </template>
                            {{ scope.row.caseNum }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <Document />
                                    </el-icon>
                                    员工姓名
                                </div>
                            </template>
                            {{ scope.row.name }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <Document />
                                    </el-icon>
                                    性别
                                </div>
                            </template>
                            {{ scope.row.sex }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <Document />
                                    </el-icon>
                                    年龄
                                </div>
                            </template>
                            {{ scope.row.age }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <Document />
                                    </el-icon>
                                    医生编号
                                </div>
                            </template>
                            {{ scope.row.deptId }}
                        </el-descriptions-item>

                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">
                                    <el-icon :style="iconStyle">
                                        <HomeFilled />
                                    </el-icon>
                                    家庭地址
                                </div>
                            </template>
                            {{ scope.row.address }}
                        </el-descriptions-item>

                    </el-descriptions>
                </div>
            </template>
        </el-table-column>

        <el-table-column prop="id" label="排班id" />
        <el-table-column prop="name" label="医生姓名" />
        <el-table-column prop="dept.deptName" label="部门名称" />
        <el-table-column prop="level.levelName" label="职称" />
        <el-table-column prop="worknum" label="工作人数" />
        <el-table-column prop="patientnum" label="看诊人数" />


        <el-table-column prop="delmark" label="生效标记">
          <template #header>
            <!-- 生效标记<br /> -->
            <el-switch v-model="show_del" active-text="全部" :active-value=0 :inactive-value=1 inactive-text="生效"
              @click="switch_del" />

          </template>
          <template #default="scope">
            <el-switch v-model="scope.row.delmark" active-color="#ff4949" inactive-color="#13ce66" active-text="失效"
              :active-value='1' :inactive-value='0' inactive-text="生效" @click="switch_change(scope.$index, scope.row)" />
            <!-- <el-button @click="test(scope.row)">123</el-button> -->
          </template>
        </el-table-column>

        <!-- <el-table-column prop="delmark" label="删除？"/> -->

        <el-table-column label="Operations">

          <template #default="scope">
            <el-button class="button_edit" @click="preDate4mod(scope.$index, scope.row)">编辑</el-button>
            <!-- <el-button size="small" type="danger">Delete</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentpage"
        :page-sizes="[5, 10, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
    <!-- 添加增加和修改对话框即可  -->
  </div>




  <el-dialog v-model="AddDialogVisible" title="新增排班" :width="dialog_width">

    <el-form :model="addform">

      <el-form-item label="排班编号" :label-width="formLabelWidth">
        <el-input v-model="addform.id" autocomplete="off" disabled placeholder="后台自动生成" />
      </el-form-item>
      <el-form-item label="医生名字" :label-width="formLabelWidth">
        <el-input v-model="addform.docname" autocomplete="off" />
      </el-form-item>
      <el-form-item label='星期一' :label-width="formLabelWidth">
        <!-- <el-input v-model="addform.mon" autocomplete="off" /> -->
        <el-select v-model="addform.mon" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>

        <span style="margin-left: 10px;">星期二：</span>
        <el-select v-model="addform.tue" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='星期三' :label-width="formLabelWidth">
        <el-select v-model="addform.wed" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>

        <span style="margin-left: 10px;">星期四：</span>
        <el-select v-model="addform.thu" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='星期五' :label-width="formLabelWidth">
        <el-select v-model="addform.fri" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>

        <span style="margin-left: 10px;">星期六：</span>
        <el-select v-model="addform.sat" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label='星期日' :label-width="formLabelWidth">
        <el-select v-model="addform.sun" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="psw_same" label="" :label-width="formLabelWidth" style="color: red;">
        <span style="color: red;">两次输入的密码不同</span>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="AddDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addData">
          确认增加
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="ModDialogVisible" title="更改信息" :width="dialog_width">

    <el-form :model="modform">

      <el-form-item label="排班编号" :label-width="formLabelWidth">
        <el-input v-model="modform.id" autocomplete="off" disabled placeholder="后台自动生成" />
      </el-form-item>
      <el-form-item label="医生名字" :label-width="formLabelWidth">
        <el-input v-model="modform.docname" autocomplete="off" />
      </el-form-item>
      <el-form-item label='星期一' :label-width="formLabelWidth">
        <!-- <el-input v-model="modform.mon" autocomplete="off" /> -->
        <el-select v-model="modform.mon" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>

        <span style="margin-left: 10px;">星期二：</span>
        <el-select v-model="modform.tue" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='星期三' :label-width="formLabelWidth">
        <el-select v-model="modform.wed" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>

        <span style="margin-left: 10px;">星期四：</span>
        <el-select v-model="modform.thu" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label='星期五' :label-width="formLabelWidth">
        <el-select v-model="modform.fri" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>

        <span style="margin-left: 10px;">星期六：</span>
        <el-select v-model="modform.sat" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label='星期日' :label-width="formLabelWidth">
        <el-select v-model="modform.sun" class="el_select" value-key="value" :style="el_select_style" placeholder="请选择">
          <el-option v-for="item in statue2code" :key="item.id" :label="item.state" :value="item.id"></el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="ModDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="modData">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import $axios from '../../utils/axios'
const psw_same = ref(false)

const dialog_width = '35%'
const formLabelWidth = '140px'
const el_select_style = 'width:200px;'

import {

  Plus,
  User
} from '@element-plus/icons-vue'
import axios from 'axios';

const tableData = ref([
  {
    id: '',
    name: '',
    deptid: '',
    dept:{
      id: 1,
      deptCode: 1,
      deptName: "内科",
      deptType: "甲类",
      delmark: 0,
    },
    levelId: '',
    level:{
      id: 1,
      levelCode: "1",
      levelName: "普通门诊号",
      levelFee: 20,
      delmark: 0,
    },
    worknum: '',
    patientnum: '',
    delmark: '',
  }
])
const pageDate = ref([
  {
     id: '',
    name: '',
    deptid: '',
    dept: {
      id: 1,
      deptCode: 1,
      deptName: "内科",
      deptType: "甲类",
      delmark: 0,
    },
    levelId: '',
    level: {
      id: 1,
      levelCode: "1",
      levelName: "普通门诊号",
      levelFee: 20,
      delmark: 0,
    },
    worknum: '',
    patientnum: '',
    delmark: '',
  }
])
const statue2code = ref([{
  id: 0,
  state: '休假',
}])
const AddDialogVisible = ref(false)
const ModDialogVisible = ref(false)
const show_del = ref(0)
// const test=(row) => {
//     console.log(row);
//     row.delmark=row.delmark==1?0:1;
// }

const addform = ref({
  id: '',
  docname: '赵子鉴',
  mon: 1,
  tue: 2,
  wed: 3,
  thu: 1,
  fri: 0,
  sat: 1,
  sun: 1,
  delmark: 0,
})
const PswChange = ref(false);
const modform = ref({
  id: '',
  docname: '',
  mon: '',
  tue: '',
  wed: '',
  thu: '',
  fri: '',
  sat: '',
  sun: '',
  delmark: '',
})

let curentindex = -1
const preDate4Add = () => {
  AddDialogVisible.value = true
}



const preDate4mod = async (index, row) => {
  // console.log(typeof (parseInt(row.regnum)), parseInt(row.regnum));

  const path = "/doc/q/byid/" + row.id
  const { data: res } = await $axios.get(path)

  if (res.code == 200) {
    console.log(res);
    curentindex = index;
    ModDialogVisible.value = true;
    modform.value = res.result;
  }
}


const modData = () => {


  const path = '/doc/update'
  // weekString2Num4Mod();
  console.log("mod:", modform.value);
  $axios.post(path, modform.value, {

    headers: {
      'Content-Type': 'application/json;utf-8'
    }

  }).then((res) => {
    if (res.data.code === 200) {
      // console.log("addform:", modform.value);
      // console.log("res:", res.data);
      tableData.value.splice(curentindex, 1, modform.value)
      loaddata();
      ModDialogVisible.value = false

    }
  })

}
//已通，待改数据
const addData = async () => {

  console.log(addform.value);
  const path = "/doc/add"
  if (addform.value.password != addform.value.copypsw) {
    psw_same.value = true;
    return;
  }
  const { data: res } = await $axios.put(
    path, addform.value,
    {
      headers: {
        'Content-Type':
          'application/json; charset=UTF-8' //将表单数据传递转化为form-data类型
      }
    })
  if (res.code == 200) {

    // console.log("re:", res.result);
    addform.value.regnum = res.result.regnum

    let obj = JSON.parse(JSON.stringify(addform.value))

    tableData.value.push(obj)
    //loaddata()
    AddDialogVisible.value = false
    loaddata()
  }

}

const switch_change = async (index, row) => {

  console.log("switch_change:", "row:", row, "index:", index)
  const path = "/doc/delet"
  const getpath = "/doc/q/byid/" + row.id
  let postdata = {};

  const { data: res_get } = await $axios.get(getpath)

  if (res_get.code == 200) {
    postdata = res_get.result;
    postdata.delmark = row.delmark;
    console.log("postdata:", postdata, "row:", row);
    $axios.post(path, postdata, {
      headers: {
        'Content-Type': 'application/json;utf-8'
      }

    }).then((res) => {
      if (res.data.code === 200) {
        console.log("del_res:", res.result);
      }
    })
  }
}
const switch_del = async () => {
  // console.log(show_del.value);
  //1是仅显示生效，0为全部显示
  if (show_del.value === 0) {
    loaddata()
  }
  else if (show_del.value === 1) {
    const path = '/doc/q/name'
    // 发同步请求
    // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
    // 并且返回服务器做出响应
    // console.log("加载生效数据");

    const { data: res } = await $axios.get(path)
    // 应用结果
    if (res.code === 200) {
      tableData.value = res.result
      // console.log("加载数据成功：");
      // console.log(res.result);

    }
    tableData.value = tableData.value.filter(checkItem)
    getPageInfo()
    // console.log(tableData.value);
  }

}
function checkItem(num) { return num.delmark === 0; }
function searchItem(num) {
  // console.log("test:\n" + num.name + " " + num.name.indexOf(search.value)); 
  return !(num.name.indexOf(search.value) === -1);
}
const search = ref()
const search_change = async () => {
  const path = '/doc/q/name'
  // 发同步请求
  // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
  // 并且返回服务器做出响应
  console.log("为表格自动加载数据");
  const { data: res } = await $axios.get(path)
  // 应用结果
  if (res.code === 200) {
    tableData.value = res.result
    console.log("加载数据成功：");
    console.log(res.result);

  }
  var s = tableData.value.filter(searchItem);
  tableData.value = s
  console.log("fileter_search", tableData.value.filter(searchItem));
  getPageInfo()

}
const autoSet = () => {

}
autoSet()
// 为表格加载数据

const loaddata = async () => {

  // test_statue2code();
  // 定义请求路径
  const path = '/doc/q/name'
  // 发同步请求
  // 发完ajax请求以后，进入等待状态，直到服务器做出响应或者超时
  // 并且返回服务器做出响应
  // console.log("为表格自动加载数据");
  const { data: res } = await $axios.get(path)
  // 应用结果
  if (res.code === 200) {
    tableData.value = res.result
    console.log("加载数据成功：");
    console.log(res.result);
    total.value = tableData.value.length
    getPageInfo();
    // console.log("pagedate:",pageDate.value);
  }
  // weekNum2String()
}
// 调用
loaddata()




const total = ref(0)//总数据条数
const currentpage = ref(1)  //当前所在页默认是第一页
const pagesize = ref(10)  //每页显示多少行数据 默认设置为10
// const  ticket: [] //这里是从后端获取的所有数据
// const pageTicket: []//分页后的当前页数据

/**
 * 
 * 修改全表数据，对应每一天的工作情况
 */
const weekNum2String = () => {
  for (let i in tableData.value) {
    for (let j in tableData.value[i]) {
      if (j != 'id' && j != 'docname' && j != 'delmark') {
        console.log();
        tableData.value[i][j] = statue2code.value[tableData.value[i][j]].state;
        // console.log("value:", tableData.value[i][j]);
      }
    }
    // console.log("\n");
  }
  // console.log("vector:", tableData.value);
}
const weekString2Num4Add = () => {
  for (let i in addform.value) {
    for (let j in addform.value[i]) {
      if (j != 'id' && j != 'docname' && j != 'delmark') {
        addform.value[i][j] = statue2code.value[addform.value[i][j]].id;
      }
    }
  }
}
const weekString2Num4del = () => {
  for (let i in modform.value) {

    if (i != 'id' && i != 'docname' && i != 'delmark') {
      // console.log("statue2code:",statue2code.value);
      for (let j in statue2code.value) {
        // console.log("modform.value[i]:",i);
        if (modform.value[i] === statue2code.value[j].id) {
          console.log(1);
          // modform.value[i]=statue2code.value[j].state;
        }
      }


    }
    // console.log("modform.value", modform.value);
  }
  console.log("modform.value", modform.value);
}

function test_statue2code() {
  console.log("statue2code:", statue2code);
  console.log("statue2code.value:", statue2code.value);
  console.log("statue2code.state:", statue2code.value[0].state);//可以对应上具体的state值
}


// 获取当前页的数据信息
function getPageInfo() {
  //清空pageTicket中的数据
  pageDate.value = [];
  // console.log("1:");
  // console.log(currentpage.value);
  // console.log(pagesize.value);

  // 获取当前页的数据

  for (let i = (currentpage.value - 1) * pagesize.value; i < total.value; i++) {
    //把遍历的数据添加到pageTicket里面
    pageDate.value.push(tableData.value[i]);
    //判断是否达到一页的要求
    if (pageDate.value.length === pagesize.value) break;
  }
}
//分页时修改每页的行数,这里会自动传入一个size
const handleSizeChange = (size) => {
  //修改当前每页的数据行数
  pagesize.value = size;
  //数据重新分页
  getPageInfo();
}
//调整当前的页码
function handleCurrentChange(pageNumber) {
  //修改当前的页码
  currentpage.value = pageNumber;
  //数据重新分页
  getPageInfo()
}

</script>

<style scoped land="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title {
    font-size: 24px;
  }

  .input_search {

    width: 400px;
    left: 0%;
  }

  .el-card__header {
    padding: 0;
  }
}

.button_edit {
  /* background: linear-gradient(135deg, rgb(132, 176, 229), rgb(63, 103, 214), rgb(132, 154, 234)); */
  /* background-color: linear-gradient(135deg, rgb(0, 0, 255), rgb(0, 128, 255), rgb(0, 255, 255)); */
  /* background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 105, 143)); */
  color: white;
  background: linear-gradient(135deg, rgb(100, 100, 255), rgb(0, 128, 255), rgb(0, 200, 250));
  transition: background-color 1.5s ease;
}

.button_edit:hover {
  background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
  color: yellow;
}

.button_edit:focus {
  background: linear-gradient(135deg, rgb(0, 178, 74), rgb(100, 216, 149), rgb(69, 175, 203));
  color: white;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 100%;
  margin-top: 12px;
  border-radius: 12px;
}

.cell-item {
  display: flex;
  align-items: center;
}
</style>